<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        ul{
            list-style: none;
            height:40px;
        }
        ul li{
            padding:10px;
            transition: all 1s ease;
            width: 100%;
        }
        ul li:hover{
            background-color: pink;
        }
        .v-enter,
        .v-leave-to{
            opacity:0;
            /*从150px位置偏移过来的*/
            transform: translateY(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 1s ease;
        }


        /*下面的 .v-move  和   .v-leave-active配合使用，能够实现列表后续的元素渐渐的漂上来的效果*/
        .v-move{
           transition: all 0.6s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app">
    <label>
        ID:
        <input type="text" v-model="id">
    </label>
    <label>
        Name:
        <input type="text" v-model="name" @keyUp.enter="add">
    </label>
    <input type="button" value="添加" @click="add">

    <!--<ul>-->
        <!--在实现列表过渡的时候，如果需要过渡元素，是通过  v-for  循环渲染出来的，不能使用 transition 包裹-->
        <!--需要使用  transition-group-->
        <!--appear可以实现一开始的数据从下面慢慢漂上来的效果-->
    <!--通过为transition-group元素，设置 tag  属性，指定的元素，不写就默认span属性-->

        <transition-group appear tag="ul">
            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                id为：{{item.id}}=========name为：{{item.name}}
            </li>
        </transition-group>
    <!--</ul>-->
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            list:[
                {id:1, name:'zs1'},
                {id:2, name:'zs2'},
                {id:3, name:'zs3'},
                {id:4, name:'zs4'}
            ]

        },
        methods:{
            add:function () {
                this.list.push({id:this.id,name:this.name})

            },
            del:function (i) {
                this.list.splice(i,1)
            }

        }

    })
</script>
</body>
</html>